<template>
   <el-card>
      <div class="box">
         <img :src="userStore.avatar" alt="用户头像" class="left">
         <div class="right">
            <h3>{{ message }}好!{{ userStore.username }}</h3>
            <p>{{ setting.title }}</p>
         </div>
      </div>
   </el-card>
   <div class="bottom">
      <svg-icon name="welcome" width="600px" height="600px"></svg-icon>
   </div>
</template>

<script setup lang="ts">
// 引入用户相关的仓库，获取当前用户的头像和昵称
import useUserStore from '@/store/modules/user'
// 引入判断当前时间段的函数
import { getTime } from '@/utils/time'
// 引入项目名称
import setting from '@/setting'
// 创建user仓库
let userStore = useUserStore()
let message = getTime()
</script>

<style lang="scss" scoped>
.box {
   display: flex;
   align-items: center;

   .left {
      width: 150px;
      height: 150px;
      border-radius: 50%;
   }

   .right {
      margin-left: 20px;

      h3 {
         font-size: 40px;
         margin-bottom: 20px;
         font-weight: 900;
      }

      p {
         color: gray;
         font-style: italic;
      }
   }

}

.bottom {
   display: flex;
   justify-content: center;
}
</style>